<template >
<div>
  <div class="header" >
    <div style="display: flex; padding-left: 1px;height:60px;">
      <div style="width: 60px">
        <img src="../../assets/logo1.png" alt="" style="width: 58px; position: relative;  right: 0">
      </div>
      <div style="font-size: 16px;color: #032d67;padding-left: 2px; font-weight: 600;">随时学</div>
    </div>

    <div><span style="color: #409EFF">{{temp}}℃</span> {{text}} {{windDir}}</div>

    <div style="font-size: 16px;height:59px;display: flex;text-align: center">
      <div style="width: 80px;height:59px;background-color: #b5d2f3;border-radius: 10%;border: #00b3ff solid 1px;">
        <el-breadcrumb  style="display: inline-block; ">
          <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="height:59px; display: flex; justify-content: center;/*平均间隔*/align-items: center;/*垂直居中*/">
        <div style="line-height: 60px">
          <el-menu :default-active="activePath" class="el-menu-demo" router mode="horizontal" @select="handleSelect" style="height:59px;display: flex; justify-content: center;/*平均间隔*/align-items: center;/*垂直居中*/">
          <el-menu-item index="/home"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jia"></use></svg><span>首页</span></el-menu-item>
          <el-submenu index="2">
            <template slot="title"><svg class="icon" style="width: 1em; height: 1.5em;" aria-hidden="true"><use xlink:href="#icon-bilibili"></use></svg><span> 我的工作台</span></template>
            <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-elementor"></use></svg><a href="https://shoujun-guo.github.io/" target="_blank"> 我的博客</a></el-menu-item>
            <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bokeyuan"></use></svg><a href="https://element.eleme.cn/#/zh-CN" target="_blank"> element官网</a></el-menu-item>
            <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bilibili"></use></svg><a href="https://www.bilibili.com/" target="_blank"> bilibili</a></el-menu-item>
            <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-csdn"></use></svg><a href="https://www.csdn.net/?spm=1011.2415.3001.4476" target="_blank" > CSDN</a></el-menu-item>
            <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shu"></use></svg><a href="https://www.w3school.com.cn/" target="_blank" > W3school</a></el-menu-item>

            <el-submenu index="2-4">
              <template slot="title">其他常用软件</template>
              <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-kafei"></use></svg><a href="https://web.baimiaoapp.com/" target="_blank" > 白描文字提取</a></el-menu-item>
              <el-menu-item ><svg class="icon" aria-hidden="true"><use xlink:href="#icon-doujiang"></use></svg><a href="https://www.php.cn/" target="_blank" > php中文网</a></el-menu-item>
              <el-menu-item >选项3</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu>
            <template slot="title"><svg class="icon" style="width: 1em; height: 1.5em;" aria-hidden="true"><use xlink:href="#icon-yingyu1"></use></svg><span> 英语学习</span></template>
            <el-menu-item index="/word_learn"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-danci"></use></svg><span> 单词学习</span></el-menu-item>
            <el-menu-item index="/addWord"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tousujianyi"></use></svg><span> 添加词汇</span></el-menu-item>
          </el-submenu>
          <el-menu-item index="/baidu" ><svg class="icon" style="width: 1em; height: 1.5em;" aria-hidden="true"><use xlink:href="#icon-baidu"></use></svg><span> 百度</span></el-menu-item>
          <el-menu-item index="/bloglist"><svg class="icon" style="width: 1.5em; height: 1.5em;" aria-hidden="true"><use xlink:href="#icon-gonggao"></use></svg><span> Blog</span></el-menu-item>
<!--          <el-menu-item index="/text">测试</el-menu-item>-->
          <div >
            <form action="https://www.baidu.com/s">
              <input class="baidu1" placeholder="百度一下" type="text" name="wd" autocomplete="off"/>
              <input class="get1" type="submit"  value="百度一下">
            </form>
          </div>
        </el-menu>

        </div>
      </div>
    </div>

    <div style=" font-size: 20px;height:60px;">
      <el-dropdown style="height: 50px; cursor: pointer">
        <div style="display: inline-block">
          <img :src="user.avatarUrl" alt="头像"
               style="width: 50px;height: 50px; border-radius: 50%; position: relative; top: 5px; right: 5px">
          <span style="margin-left: 5px;font-size: 16px; position: relative; top: -12px; left: 1px;">{{ user.nickname }}
            <el-tag v-if="user.role==='ROLE_USER'">普通用户</el-tag>
            <el-tag v-if="user.role==='ROLE_ADMIN'">管理员</el-tag>
            <el-tag v-if="user.role==='ROLE_STUDENT'">学生</el-tag>
            <el-tag v-if="user.role==='ROLE_TEACHER'">教师</el-tag>
            <i class="el-icon-arrow-down" style="margin-left: 5px"></i></span>
        </div>
        <el-dropdown-menu slot="dropdown"  style="width: 160px;text-align: center;" >
          <el-dropdown-item style="font-size: 15px; padding: 5px 0"><span @click="drawer = true"><svg class="icon"  aria-hidden="true"><use xlink:href="#icon-gerenzhongxin"></use></svg><span > 个人信息</span></span></el-dropdown-item>
          <el-dropdown-item style="font-size: 15px; padding: 5px 0"><span @click="$router.push('/')"><svg class="icon"  aria-hidden="true"><use xlink:href="#icon-gengduofuwu"></use></svg><span > 后台管理</span></span></el-dropdown-item>
          <el-dropdown-item style="font-size: 15px; padding: 5px 0"><span @click="logout"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tuichu2"></use></svg><span> 退 &#8195 出</span></span></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-drawer
          title="个人信息"
          :visible.sync="drawer"
          size="30%"
          style="font-size: 25px">
        <div class="outset">
          <div class="divPhoto"><img :src="user.avatarUrl" alt="头像" class="photo"></div>
          <div id="tables" >
            <el-descriptions  :column="1" :size="medium" border id="my-label">
              <el-descriptions-item >
                <template slot="label">
                  <i class="el-icon-position"></i>
                  ID
                </template>
                <el-tag size="small" >{{user.accountId}}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item  >
                <template slot="label">
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{user.username}}
              </el-descriptions-item>
              <el-descriptions-item  style="font-size: 16px;" >
                <template slot="label" class="my-label">
                  <i class="el-icon-bell"></i>
                  昵  称
                </template>
                {{ user.nickname }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{user.phone}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-mobile-phone"></i>
                  邮箱
                </template>
                {{ user.email}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-location-outline"></i>
                  居住地
                </template>
                {{ user.address}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>
                  备注
                </template>
                学校
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-office-building"></i>
                  联系地址
                </template>
                {{ user.address}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </div>
        <div class="getButton"><el-button @click="innerDrawer = true" style="width: 109px;height: 40px;font-size: 13px;border: #ffef40 solid 2px;font-weight: 400;background-color:darkseagreen;color: white">修改个人信息</el-button></div>
        <div class="getButton1"><el-button @click="innerDrawer1 = true" style="width: 109px;height: 40px;font-size: 13px;border: #fffc40 solid 2px;font-weight: 400;background-color:#86a8d9;color: white">修改密码</el-button>
        </div>
        <div>


          <el-drawer
              title="修改个人信息"
              :append-to-body="true"
              size="25%"
              :visible.sync="innerDrawer">

            <div class="inset">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9091/file/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
              >
                <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar"  alt="头像">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-card  style="width: 100%" >
                <el-form label-width="80px" size="small">

                  <el-form-item label="ID">
                    <el-input v-model="form.accountId" autocomplete="off" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="用户名">
                    <el-input v-model="form.username" autocomplete="off" ></el-input>
                  </el-form-item>
                  <el-form-item label="昵称">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="电话">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="地址">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
                <div  class="el-card-footer">
                  <el-button type="primary" @click="save" >确 定</el-button>
                </div>
              </el-card>
            </div>
          </el-drawer>
        </div>
        <div class="password">
          <el-drawer
              title="修改密码"
              :append-to-body="true"
              size="25%"
              :visible.sync="innerDrawer1"
              style="font-size: 20px">
            <el-card style="padding: 10px 10px;">
              <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass">

                <el-form-item label="原密码" prop="password">
                  <el-input v-model="form.password" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="confirmPassword">
                  <el-input v-model="form.confirmPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="savePassword">确 定</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-drawer>
        </div>
      </el-drawer>
    </div>

  </div>


</div>
</template>

<script>

export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    collapse:'',
  },
  computed: {
    currentPathName () {
      return this.$store.state.currentPathName;　　//需要监听的数据
    }
  },


  data(){
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      drawer: false,
      innerDrawer: false,
      innerDrawer1: false,
      form:{},
      activeIndex: '1',
      activeIndex2: '1',
      time:"",
      temp:"",
      text:"",
      windDir:"",
      rules: {
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 3, message: '长度不少于3位', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 3, message: '长度不少于3位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, message: '长度不少于3位', trigger: 'blur' }
        ],
      }
    }
  },
  inject: ['reload'],
  created() {
    this.activeItem()
      this.activePath = window.sessionStorage.getItem('activePath')
    // this.$router.path = '/home'//默认初始路径
    this.request.get("/user/username/" + this.user.username).then(res=>{
      if (res.code==='200'){
        this.form = res.data
        this.user.username=res.data.username
        this.user.nickname=res.data.nickname
        this.user.accountId=res.data.accountId
        this.user.phone=res.data.phone
        this.user.address=res.data.address
        this.user.email=res.data.email
        this.user.avatarUrl=res.data.avatarUrl
      }
      this.$forceUpdate();
    })
    this.request.get("https://devapi.qweather.com/v7/weather/now?", {
      params: {
        key: '07687609e8de43b59a4fbfb6aa0af9ae',
        location:'101.95,36.83',
      }
    }).then(res => {
      console.log(res)
      this.weather=res.now
      console.log(res.now)
      this.temp=res.now.temp;
      this.text=res.now.text
      this.windDir=res.now.windDir
    })
  },

  methods: {
    activeItem (path) {
      window.sessionStorage.setItem('activePath', path)
      this.activePath = path
    },
    logout() {
      this.$store.commit("logout")
      this.$message.success("退出成功")
    },
    goback(){
      this.$router.push('/')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    save() {
      this.request.post("/user", this.form).then(res => {
        console.log(this.form)
        if (res) {
          this.$message.success("保存成功")
          this.handleClose()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    savePassword() {
      this.$refs.pass.validate((valid) => {
        if (valid) {
          if (this.form.newPassword !== this.form.confirmPassword) {
            this.$message.error("2次输入的新密码不相同")
            return false
          }
          this.request.post("/user/password", this.form).then(res => {
            if (res.code === '200') {
              this.$message.success("修改成功")
              this.$store.commit("logout")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },

    handleAvatarSuccess(res) {
      this.form.avatarUrl = res
      this.request.post("/user", form).then(res => {
        if (res) {
          this.$message.success("保存成功！")
          this.$emit("fatherRefreshInfo")
        } else {
          this.$message.error("保存失败！")
        }
      })
    },
    handleClose() {
      this.$confirm('您确定要修改吗？')
          .then(_ => {
            this.reload()
          })
          .catch(_ => {});
    }
  }
}
</script>

<style scoped>
.baidu1{
  background-color: #fff;
  width: 140px;
  height: 6px;
  border-radius: 10px 0 0 10px;
  border-top: 2px solid #c4c7ce;
  border-left: 2px solid #c4c7ce;
  border-bottom: 2px solid #c4c7ce;
  color: #222;
  overflow: hidden;
  box-sizing: content-box;
  outline-color: #4e6ef2;
  padding: 12px 16px;
}
.get1{
  width: 55px;
  height: 34px;
  padding: 0;
  background-color: #4e6ef2;
  border-radius: 0 10px 10px 0;
  font-size: 10px;
  color: #fff;
  font-weight: 400;
  border: none;
  outline: 0;
}
.header{
  width: 100%;
  display: flex;
  line-height: 60px;
  font-size: 12px;
  justify-content: space-between;/*平均间隔*/
  align-items: center;/*垂直居中*/
}
.header2{
  background-color: #e00808;
  border: 1px solid paleturquoise;
  height: 45px;
  width: 100%;
  display: flex;
  line-height: 50px;
  font-size: 10px;
  justify-content: center;
  align-items: center;/*垂直居中*/
}
.inset{
  background-color: #b5d2f3;
  width: 100%;
  padding: 10px 10px;
}
.password{

  width: 100%;
  padding: 10px 10px;
}
.outset{
  font-size: 16px;
  width: 100%;
  background-color: #e36464;
  padding: 10px 10px;
}
.photo{
  width: 200px;
  height: 200px;
  border-radius: 50%;

}
#my-label {
  font-size: 16px;
  width: 100%;
  height: 20px;
  background-color: #d32828;
}

.el-descriptions--small {
  font-size: 20px;
}
.divPhoto{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
}
#tables {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}

.getButton{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 280px;
}
.getButton1{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
}
.avatar {
  width: 170px;
  height: 170px;
  border-radius: 20%;
  /*width: 138px;*/
  /*height: 138px;*/
  display: block;
}
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.el-card-footer{
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
.el-menu-item{
  padding: 0 12px;

}

.el-submenu :deep(.el-submenu__title) {
  padding: 0 12px!important;
}

</style>